<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input v-model="xx" placeholder=""
          ><template #append>
            <el-button @click="getls()" round
              ><el-icon><Search /></el-icon
            ></el-button>
          </template> </el-input
      ></el-col>
      <!--------------------------- 添加用户 -------------------------------->
      <el-col :span="4"
        ><el-button type="success" @click="addDialogVisible = true"
          >添加学生</el-button
        >
      </el-col>
      <el-dialog title="添加学生" v-model="addDialogVisible" width="50%">
        <!-- 添加用户内容底部区域 -->
        <el-form label-width="70px">
          <el-form-item label="学号">
            <el-input v-model="sid" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="姓名">
            <el-input v-model="name" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="性别">
            <el-input v-model="gender" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="学院">
            <el-input v-model="college" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="系别">
            <el-input v-model="sdept" placeholder=""></el-input>
          </el-form-item>

          <el-form-item label="班级">
            <el-input v-model="class1" placeholder=""></el-input>
          </el-form-item>
        </el-form>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false" round>取 消</el-button>
          <el-button type="primary" @click="insertstudent()" round
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-row>

    <el-table :data="user" stripe height="400px">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="学号" prop="sid"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="学院" prop="college"></el-table-column>
      <el-table-column label="系别" prop="sdept"></el-table-column>
      <el-table-column label="班级" prop="class"></el-table-column>

      <el-table-column label="操作" width="180px" fixed="right" key="slot">
        <template #default="scope">
          <el-button
            type="primary"
            size="mini"
            @click="editDialogVisible = true"
            round
            ><el-icon><Edit /></el-icon>编辑</el-button
          >
          <el-button
            type="danger"
            size="mini"
            @click="deletestudent(scope.row)"
            round
            >删除</el-button
          >
        </template>
        <!---------------分配角色按钮,tooltip:提示框,enterable:自动隐藏 -------------->
      </el-table-column>
    </el-table>

    <el-dialog title="修改用户资料" v-model="editDialogVisible" width="50%">
      <!-- 添加用户内容底部区域 -->
      <el-form label-width="70px">
        <el-form-item label="学号">
          <el-input
            v-model="updatesid"
            placeholder="您要修改的该学生学号"
          ></el-input>
        </el-form-item>

        <el-form-item label="姓名">
          <el-input v-model="updatename" placeholder=""></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-input v-model="updategender" placeholder=""></el-input>
        </el-form-item>

        <el-form-item label="学院">
          <el-input v-model="updatecollege" placeholder=""></el-input>
        </el-form-item>

        <el-form-item label="系别">
          <el-input v-model="updatesdept" placeholder=""></el-input>
        </el-form-item>

        <el-form-item label="班级">
          <el-input v-model="updateclass1" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <span  class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatestudent()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="删除用户资料" v-model="deleteDialogVisible" width="50%">
      <!-- 添加用户内容底部区域 -->
      <el-form label-width="70px">
        <el-form-item label="学号">
          <el-input v-model="deletesid" placeholder="Please input"></el-input>
        </el-form-item>
      </el-form>
      <span  class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deletestudent()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { h } from "vue";
import { ElNotification } from "element-plus";
import { ref } from "vue";
export default {
  data() {
    return {
      sid: ref(""),
      gender: ref(""),
      name: ref(""),
      class1: ref(""),
      college: ref(""),
      sdept: ref(""),

      updatesid: ref(""),
      updategender: ref(""),
      updatename: ref(""),
      updateclass1: ref(""),
      updatecollege: ref(""),
      updatesdept: ref(""),

      deletesid: ref(""),

      addDialogVisible: false,
      editDialogVisible: false,
      deleteDialogVisible: false,
      user: [],
      xx: ref(""),
    };
  },
  created() {
    this.getls();
  },
  methods: {
    // 获取用户列表数据（getUserList）
    getls() {
      this.user = [];
      const that = this;
      this.$axios
        .get("/getstudent", { params: { xx: this.xx || "" } })
        .then(function (response) {
          console.log(response, "data0====>");
          if (!response.data) {
            that.user = [];
          } else if (JSON.stringify(response.data).split("}").length <= 2) {
            that.user.push(response.data);
          } else {
            let temp = response.data.replace(/}/g, "}$").split("$");
            console.log(temp, "data1====>");
            temp = temp.map((item) => {
              if (item) {
                item = JSON.parse(item);
              }
              return item;
            });
            temp.splice(temp.findIndex((item) => item == ""));
            that.user = temp;
          }
        });
    },
    addDialogClosed() {
      this.$refs.addUserFormRef.resetFields();
    },
    editDialogClosed() {
      this.$refs.editUserFormRef.resetFields();
    },
    deleteDialogClosed() {
      this.$refs.editUserFormRef.resetFields();
    },
    insertstudent() {
      const that = this;
      this.$axios
        .get("/insertstudent", {
          params: {
            sid: this.sid,
            name: this.name,
            gender: this.gender,
            sdept: this.sdept,
            class1: this.class1,
            college: this.college,
          },
        })
        .then(function (response) {
          console.log("插入成功！");
          ElNotification({
            title: "成功",
            message: h("i", { style: "color: coral" }, "用户已插入数据库"),
          });
        });
    },
    updatestudent() {
      const that = this;
      this.$axios
        .get("/updatestudent", {
          params: {
            sid: this.updatesid,
            name: this.updatename,
            gender: this.updategender,
            sdept: this.updatesdept,
            class1: this.updateclass1,
            college: this.updatecollege,
          },
        })
        .then(function (response) {
          console.log("修改成功！");
          ElNotification({
            title: "成功",
            message: h("i", { style: "color: coral" }, "用户已插入数据库"),
          });
        });
    },
    deletestudent(row) {
      const that = this;
      this.$axios
        .get("/deletestudent", {
          params: {
            sid: row.sid,
          },
        })
        .then(function (response) {
          console.log("删除成功！");
          ElNotification({
            title: "成功",
            message: h("i", { style: "color: coral" }, "用户已在数据库删除"),
          });
          that.getls();
        });
    },
  },
};
</script>

<style lang="less" scoped></style>
